<template>
    <div class="page">
        <div class="search-view" style="display:none;">
            <Input v-model="search.name" clearable placeholder="请输入车名称" style="width: 150px;margin-right:10px;" />
            <Button 
                class="action-btn"
                icon="ios-search" 
                type="primary" 
                :loading="listData.isLoading"
                @click="onClickSearch">查询
            </Button>
            <Button 
                class="action-btn" 
                type="primary"
                @click="onClickClearSearch">清空
            </Button>
            <Button 
                class="action-btn"
                icon="ios-add-circle-outline"
                type="primary"
                @click="onClickEdit">新增
            </Button>
        </div>
        <div class="content-view">
            <RoomListView 
                :data="listData"
                @on-action="onActionRow">
            </RoomListView>
        </div>
        <div class="page-view">
            <Page 
                show-elevator
                show-sizer
                show-total
                :current="pageData.currentPage+1" 
                :page-size="pageData.pageSize"
                :total="pageData.totalSize"
                @on-change="changePage"
                @on-page-size-change="changePagesize">
            </Page>
        </div>
        <!-- 操作弹窗 -->
    </div>
</template>

<script>
import RoomListView from './view/RoomListView'
import roomService from '@/network/service/RoomService.js'

export default {
    components: {
        RoomListView,
    },
    data() {
        return {
            search: {
                name: null
            },
            pageData: {
                currentPage: 0,
                pageSize: 20,
                totalSize: 0,
            },
            listData: {
                isLoading: false,
                data: []
            },
        }
    },
    mounted(){
        this.getListData();
    },
    methods: {
        onClickSearch() {
            this.getListData();
        },
        onClickClearSearch() {
            this.search.name = null;
        },
        changePage(page) {
            this.pageData.currentPage = page-1;
            this.getListData();
        },
        changePagesize(pagesize){
            this.pageData.pageSize=pagesize;
            this.getListData();
        },
        getListData() {
            this.listData.isLoading = true;
            let that = this;
            roomService.getRoomList(this.pageData.currentPage, this.pageData.pageSize).then(res => {
                let result = res.data;
                let code = result.rescode;
                that.listData.isLoading = false;
                if (code == 100) {
                    that.listData.data=result.data;
                    that.pageData.totalSize = result.totalSize;
                }else {
                    that.$Message.error(result.msg);
                }
            }, error => {
                that.listData.isLoading = false;
                that.$exception.netError(error);
            });
        },
        onClickEdit() {
            //this.editData.isShow = true;
            this.$router.push({ name: 'CarDetail', query: { id: null }});
        },
        // 行操作点击
        onActionRow(obj){
            if(obj!=null){
                let action = obj.action;
                let params = obj.params;
                // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                switch(action){
                    case 'detail':
                        //this.$router.push({ name: 'CarDetail', query: { id: params.row.id }});
                    break;
                }
            }
        },
        delCar(index, id) {
            let that = this;
            carService.delCar(id).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.listData.data.splice(index, 1);
                }else {
                    that.$Message.error(result.msg);
                }
            }, error => {
                that.listData.isLoading = false;
                that.$exception.netError(error);
            });
        },
        onSubmitActionEdit(editdata){
            let that = this;
            that.editData.isSubmitLoading = true;
            setTimeout(function(){
                that.editData.isSubmitLoading = false;
                that.editData.isShow = false;
            },3000)
            console.log(this.editData);
            console.log(editdata);
        }
    },
    
}
</script>
<style lang="less" scoped>
.page {
    .search-view {
        margin-bottom: 5px;
        .action-btn {
            margin-right: 10px;
        }
    }
    .content-view {
        
    }
    .page-view {
        text-align: center;
        padding: 5px;
        border-radius: 4px;
        background-color: #fff;
        margin-top: 10px;
    }
}

</style>


